/*
 * @Author: Yaphet_peng
 * @Date:   2015-08-12 23:38:13
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-14 13:24:20
 */

define(['jquery', 'd3'], function($, d3) {
    var bubble = {
        setting: {
            selector: '#three_4',
            series: [{
                'name': '访问网站',
                'value': 17,
                'icon': 'website.png'
            }, {
                'name': '电话',
                'value': 23,
                'icon': 'telephone.png'
            }, {
                'name': '现场回访',
                'value': 3,
                'icon': 'review.png'
            }, {
                'name': '邮件',
                'value': 13,
                'icon': 'mail.png'
            }, {
                'name': '短信',
                'value': 35,
                'icon': 'message.png'
            }, {
                'name': '微信',
                'value': 260,
                'icon': 'wechat.png'
            }, ],
            margin: {
                top: 10,
                right: 10,
                left: 20,
                bottom: 30
            },
            colorset: ['#23D2FD'],
            radius: 15,
            textStyle: {
                fontSize: '12px',
                color: '#C8C8C8',
                fontWeight: '400'
            },
            valueStyle: {
                fontSize: '12px',
                color: '#000000',
                fontWeight: '600'
            }
        },
        bubble: function three_4(setting) {

                document.querySelector(setting.selector).innerHTML = ''
                var selector = setting.selector,
                    series = setting.series,
                    colorset = setting.colorset,
                    radius = setting.radius,
                    margin = setting.margin,
                    colorset = setting.colorset,
                    valueStyle = setting.valueStyle,
                    width = document.querySelector(selector).offsetWidth,
                    height = document.querySelector(selector).offsetHeight,
                    textStyle = setting.textStyle,
                    tickValues = []

                for (var i = 0, len = series.length; i < len; i++) {

                    tickValues.push(series[i].name)
                }

                var svg = d3.select(selector)
                    .append('svg')
                    .attr('width', width)
                    .attr('height', height)

                var xScale = d3.scale.ordinal()
                    .domain(tickValues)
                    .rangeBands([0, width - margin.left - margin.right], 0.6)

                var yScale = d3.scale.linear()
                    .domain([-10, d3.max(series, function(d) {

                        return (d['value']) + 50
                    })])
                    .range([0, height - margin.top - margin.bottom])

                var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .tickValues(tickValues)
                    .orient('bottom')
                    .tickSize(6, 0)

                svg.append('g')
                    .attr('class', 'xAxis')
                    .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')
                    .call(xAxis)

                svg.select('.xAxis').selectAll('path')
                    .attr('fill', 'none')
                    .attr('stroke', '#CCD4D4')
                    .attr('stroke-width', 1)

                svg.select('.xAxis').selectAll('text')
                    .style('font-size', textStyle.fontSize)
                    .style('fill', textStyle.color)
                    .style('font-weight', textStyle.fontWeight)

                var con = svg.append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')

                con.selectAll('.line')
                    .data(series)
                    .enter()
                    .append('line')
                    .attr('class', 'line')
                    .attr({
                        x1: function(d, i) {

                            return xScale(d['name'])
                        },
                        y1: 0,
                        x2: function(d, i) {

                            return xScale(d['name'])
                        },
                        y2: function(d, i) {

                            return -yScale(d['value'])
                        }
                    })
                    .attr('stroke', colorset[0])
                    .attr('stroke-width', 1)



                con.selectAll('.tran')
                    .data(series)
                    .enter()
                    .append('polygon')
                    .attr('class', 'tran')
                    .attr("points", function(d, i) {

                        /*return "20,10 30,20 10,25"*/
                        var x1 = xScale(d['name']),
                            y1 = -yScale(d['value']),
                            x2 = xScale(d['name']) - 10,
                            y2 = -yScale(d['value']) - 20,
                            x3 = xScale(d['name']) + 10,
                            y3 = -yScale(d['value']) - 20

                        return (x1 + ',' + y1 + ' ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3)
                    })
                    .attr("fill", colorset[0])

                con.selectAll('.circle')
                    .data(series)
                    .enter()
                    .append('circle')
                    .attr("class", 'circle')
                    .attr({

                        cx: function(d, i) {

                            return xScale(d['name'])
                        },
                        cy: function(d, i) {

                            return -yScale(d['value']) - 22
                        },
                        r: 15
                    })
                    .attr('stroke', colorset[0])
                    .attr('stroke-width', 1)
                    .attr('fill', '#fff')

                con.selectAll('.text')
                    .data(series)
                    .enter()
                    .append('text')
                    .attr('class', 'text')
                    .attr({

                        x: function(d, i) {

                            return xScale(d['name'])
                        },
                        y: function(d, i) {

                            return -yScale(d['value']) - 22
                        }
                    })
                    .attr('text-anchor', 'middle')
                    .attr('dy', '0.35em')
                    .text(function(d, i) {

                        return d['value']
                    })
                    .style('fill', valueStyle.color)
                    .style('font-size', valueStyle.fontSize)
                    .style('font-weight', valueStyle.fontWeight)

                con.selectAll("image")
                    .data(series)
                    .enter()
                    .append("image")
                    .attr("x", function(d, i) {
                        return xScale(d['name']) - 12
                    })
                    .attr("y", -18)
                    .attr("width", 25)
                    .attr("height", 25)
                    .attr("xlink:href", function(d, i) {
                        return "/resources/app/images/chart/" + d['icon']
                    })


            }
        
    }

    three_4(bubble.setting)
    function three_4(setting) {

                document.querySelector(setting.selector).innerHTML = ''
                var selector = setting.selector,
                    series = setting.series,
                    colorset = setting.colorset,
                    radius = setting.radius,
                    margin = setting.margin,
                    colorset = setting.colorset,
                    valueStyle = setting.valueStyle,
                    width = document.querySelector(selector).offsetWidth,
                    height = document.querySelector(selector).offsetHeight,
                    textStyle = setting.textStyle,
                    tickValues = []

                for (var i = 0, len = series.length; i < len; i++) {

                    tickValues.push(series[i].name)
                }

                var svg = d3.select(selector)
                    .append('svg')
                    .attr('width', width)
                    .attr('height', height)

                var xScale = d3.scale.ordinal()
                    .domain(tickValues)
                    .rangeBands([0, width - margin.left - margin.right], 0.6)

                var yScale = d3.scale.linear()
                    .domain([-10, d3.max(series, function(d) {

                        return (d['value']) + 50
                    })])
                    .range([0, height - margin.top - margin.bottom])

                var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .tickValues(tickValues)
                    .orient('bottom')
                    .tickSize(6, 0)

                svg.append('g')
                    .attr('class', 'xAxis')
                    .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')
                    .call(xAxis)

                svg.select('.xAxis').selectAll('path')
                    .attr('fill', 'none')
                    .attr('stroke', '#CCD4D4')
                    .attr('stroke-width', 1)

                svg.select('.xAxis').selectAll('text')
                    .style('font-size', textStyle.fontSize)
                    .style('fill', textStyle.color)
                    .style('font-weight', textStyle.fontWeight)

                var con = svg.append('g')
                    .attr('transform', 'translate(' + margin.left + ',' + (height - margin.bottom) + ')')

                con.selectAll('.line')
                    .data(series)
                    .enter()
                    .append('line')
                    .attr('class', 'line')
                    .attr({
                        x1: function(d, i) {

                            return xScale(d['name'])
                        },
                        y1: 0,
                        x2: function(d, i) {

                            return xScale(d['name'])
                        },
                        y2: function(d, i) {

                            return -yScale(d['value'])
                        }
                    })
                    .attr('stroke', colorset[0])
                    .attr('stroke-width', 1)



                con.selectAll('.tran')
                    .data(series)
                    .enter()
                    .append('polygon')
                    .attr('class', 'tran')
                    .attr("points", function(d, i) {

                        /*return "20,10 30,20 10,25"*/
                        var x1 = xScale(d['name']),
                            y1 = -yScale(d['value']),
                            x2 = xScale(d['name']) - 10,
                            y2 = -yScale(d['value']) - 20,
                            x3 = xScale(d['name']) + 10,
                            y3 = -yScale(d['value']) - 20

                        return (x1 + ',' + y1 + ' ' + x2 + ',' + y2 + ' ' + x3 + ',' + y3)
                    })
                    .attr("fill", colorset[0])

                con.selectAll('.circle')
                    .data(series)
                    .enter()
                    .append('circle')
                    .attr("class", 'circle')
                    .attr({

                        cx: function(d, i) {

                            return xScale(d['name'])
                        },
                        cy: function(d, i) {

                            return -yScale(d['value']) - 22
                        },
                        r: 15
                    })
                    .attr('stroke', colorset[0])
                    .attr('stroke-width', 1)
                    .attr('fill', '#fff')

                con.selectAll('.text')
                    .data(series)
                    .enter()
                    .append('text')
                    .attr('class', 'text')
                    .attr({

                        x: function(d, i) {

                            return xScale(d['name'])
                        },
                        y: function(d, i) {

                            return -yScale(d['value']) - 22
                        }
                    })
                    .attr('text-anchor', 'middle')
                    .attr('dy', '0.35em')
                    .text(function(d, i) {

                        return d['value']
                    })
                    .style('fill', valueStyle.color)
                    .style('font-size', valueStyle.fontSize)
                    .style('font-weight', valueStyle.fontWeight)
                con.selectAll("image")
                    .data(series)
                    .enter()
                    .append("image")
                    .attr("x", function(d, i) {
                        return xScale(d['name']) - 12
                    })
                    .attr("y", -12)
                    .attr("width", 25)
                    .attr("height", 25)
                    .attr("xlink:href", function(d, i) {
                        return "/resources/app/images/chart/" + d['icon']
                    })

                }
    return {
        bubble: bubble

    }
})